<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="/css/main.css"/>
  <link rel="stylesheet" href="/cms/css/bootstrap.min.css"/>
  <script src="/js/uikit.js"></script>
</head>


<style>
  .name {
    margin-left: 0;
    margin-right: 0;
    font-size: 14px;
    font-weight: bold;
    color: #2e2e2e;
    display: inline-block;
    vertical-align: top;
    font-family: 'PingFangSC-Semibold';
  }
  .uk-navbar-item{
    font-size: 20px;
  }
  .uk-navbar-nav li a{
    font-size: 14px;
  }
  .uk-breadcrumb li a{
    font-size: 14px;
  }


</style>

<body>

<div th:insert="~{common::#header}"></div>
<div class="uk-section uk-section-muted">
  <div class="uk-container">
    <ul class="uk-breadcrumb uk-margin-medium-top-">
      <li><a>我的</a></li>
      <li><a>我发布的文章</a></li>
      <li><a>文章详情</a></li>
    </ul>
    <div class="uk-background-default uk-border-rounded uk-box-shadow-small">
      <div class="uk-container uk-container-xsmall uk-padding-large">
        <article class="uk-article">

          <h1 class="uk-article-title" th:text="${article.articleName}"></h1>
          <input type="hidden" id="ArticleId" th:value="${article.id}">
          <button th:each="tag:${tags}" class="layui-btn"
                  style="background-color: #583ABC; color: #FFF; border: 0; float: right; margin-right: 10px;">
            <span th:text="${tag}"></span>
          </button>

          <div class="uk-article-meta uk-margin uk-flex uk-flex-middle">
            <img class="uk-border-circle uk-avatar-small" style="height: 36px;width: 36px;"
                 th:src="'/' + ${session.current_user.headImg}" alt="Sara Galen">
            <div>
              本篇文章创建于：
              <time class="uk-margin-small-right"
                    th:text="${#dates.format(article.createTime, 'yyyy-MM-dd hh:mm:ss')}"></time>
              <br>
              更新于：
              <time th:text="${#dates.format(article.updateTime, 'yyyy-MM-dd hh:mm:ss')}"></time>
            </div>
          </div>
          <div th:utext="${article.content}">

          </div>
        </article>


        <div class="uk-text-center" th:if="${article.email == session.current_user.email}">

          <input class="uk-button uk-button-primary uk-border-rounded" type="submit"
                 th:onclick="updateArticlePage([[${article.id}]])"
                 value="修改这篇文章">
        </div>

      </div>
    </div>

    <div class="uk-background-default uk-border-rounded uk-box-shadow-small">
      <div class="uk-container uk-container-xsmall uk-padding-large">

        <div class="uk-article-content">
          <form class="uk-form-stacked uk-margin-medium-top layui-form" onsubmit="return false;">
            <div class="uk-margin-bottom">
              <div class="uk-form-controls">
                <input id="tag" class="uk-input uk-border-rounded" placeholder="想对作者说点什么......键入Enter添加"
                       autocomplete="off" type="text">
              </div>
            </div>
          </form>
        </div>

        <article class="uk-article">
          <h1 class="uk-article-title">来自热心网友的评论：</h1>
        </article>
        <div class="uk-article-content" th:each="comm:${responseList}">
          <form class="uk-form-stacked uk-margin-medium-top layui-form" onsubmit="return false;">

            <div class="uk-article-meta uk-margin uk-flex uk-flex-middle">
              <img class="uk-border-circle uk-avatar-small" style="height: 36px;width: 36px;"
                   th:src="'/' + ${comm.comment.fromHeadImg}" alt="Sara Galen">
              <div style="width: 100%;">
                <span th:text="${comm.comment.fromName}" class="name"></span> <span
                      th:text="${#dates.format(comm.comment.createTime, 'yyyy-MM-dd hh:mm:ss')}"></span>
                <button style="font-size: 14px;float:right;background-color: #583ABC;color:#FFF; border: 0;"
                        th:onclick="addComment([[${comm.comment.id}]])">评论
                </button>
              </div>
            </div>
            <p style="font-size: 16px;" class="new-comment" th:text="${comm.comment.conteng}"></p>

            <div style="padding-left: 10px;border-left: 4px solid #c5c5c5; margin-left: 40px;"
                 th:each="children:${comm.commentList}">

              <div class="uk-article-meta uk-margin uk-flex uk-flex-middle">
                <img class="uk-border-circle uk-avatar-small" style="height: 36px;width: 36px;"
                     th:src="'/' + ${children.fromHeadImg}" alt="Sara Galen">
                <div style="width: 100%;">
                  <span th:text="${children.fromName}" class="name"></span><span>&nbsp;&nbsp;&nbsp;&nbsp;回复&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  <span th:text="${children.toName}" class="name"></span> <span
                        th:text="${#dates.format(children.createTime, 'yyyy-MM-dd hh:mm:ss')}"></span>
                </div>
              </div>
              <p style="font-size: 16px;" class="new-comment" th:text="${children.conteng}"></p>
            </div>
          </form>
        </div>

      </div>
    </div>
  </div>
</div>

<div th:insert="~{common::#footer}"></div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">添加评论</h4>
      </div>
      <div class="modal-body">
        <input type="text" id="newComment" class="uk-input uk-border-rounded">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" id="submitComment" class="btn btn-primary">提交</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal -->
</div>
<script src="/js/awesomplete.js"></script>
<script src="/js/custom.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script>
  function addComment(index) {
    $("#myModal").modal('show');

    $("#submitComment").click(function () {
      var comment = $("#newComment").val();
      if(!comment) {
        alert("请输入内容！");
        return false;
      }

      $.ajax({
        url:'/comment/add?commentId='+index + '&comment=' + comment + '&category=2',
        success:function (result) {
          if(result.code ==200) {
            alert(result.msg);
            window.location.reload();
          } else {
            alert(result.msg);
            return false;
          }
        }
      })
    })


  }


  function updateArticlePage(index){
    window.location.href='/article/updateById?articleId='+index;
  }

  document.onkeydown = function(e){
    if(e.keyCode == 13){
      var tag = $("#tag").val();
      var articleId = $("#ArticleId").val();
      if (!tag) {
       alert("请输入标签！");
        return false;
      }

      $.ajax({
        url:'/comment/addCategory?comment='+ tag + '&articleId='+ articleId,
        success:function (result) {
          if(result.code ==200) {
            alert(result.msg);
            window.location.reload();
          } else {
            alert(result.msg);
            return false;
          }
        }
      })
    }
  }

</script>

</body>

</html>